<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>首页</title>

</head>
<style>
    body{
        padding: 0;
    }
    #app{
        width:1080px;
        margin: 0 auto;
    }
    a{
        font-size: 20px;
        text-decoration: none;
        color: black;
    }
    .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 0;
    }
    .el-table .el-table__cell {
        padding: 5px 0;
        min-width: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
    }
    .notice{
        float: left;
        margin-top: 10px;
        width: 500px;
        height: 220px;
        background-color: #f3f0b5;
        border-radius: 8px;
    }
    .notice>p{
        padding-left: 20px;
        padding-right: 10px;
        font-size: 14px;
    }
    .hottitle{
        background-color:#f3f0b5 ;
        border-radius: 8px;
        margin-top: 10px;
        margin-left: 20px;
        float: left;
        width: 520px;
        height:220px ;
    }
    #b_r_div{
        margin-left: 30px;
        overflow: hidden;
        text-align: center;
    }
    #b_r_div>div{
        border: 1px solid #f3721c;
        width: 120px;
        height:170px;
        float: left;
        margin-left: 20px;
    }
    #b_r_div>div>.title_p2{
        margin-top: 5px;
        font-size: 12px;
        color: red;
        text-align: center;
        padding: 0;

    }
    #b_r_div>div>img{
        width: 120px;
        height: 140px;
        transition: all 0.6s;
    }
    #b_r_div>div>img:hover{
        transform: scale(1.1);
    }

</style>
<body>
<div id="app" >
    <el-container>
        <el-header height="150px">
            <div style="width:1080px;height:100px; margin: 0 auto;">
                <div style="float: left"><img src="./imgs/logo.png"
                                              style="width: 400px;height:100px;vertical-align: middle" alt=""></div>

                <div style="float: right;font-size: 15px;position: relative;right: 30px"><span >欢迎xxx回来 </span></div>
                <div style="float: right;position: absolute;top: 50px;right: 250px">
                    <a href="">购物车</a><el-divider direction="vertical"></el-divider>
                    <a href="">我的账户</a><el-divider direction="vertical"></el-divider>
                    <a href="">新用户注册</a><el-divider direction="vertical"></el-divider>
                    <a href="">我要登录</a><el-divider direction="vertical"></el-divider>
                    <a href="">帮助中心</a></el-divider>
                </div>
            </div>
            <!--导航菜单开始-->
            <div>
                <el-menu style="background-color: #f3f0b5;width: 1050px;"
                         :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">处理中心</el-menu-item>
                    <el-menu-item index="2">处理中心</el-menu-item>
                    <el-menu-item index="3">处理中心</el-menu-item>
                    <div style="float: right;position: relative;top: 10px;margin-right: 30px">
                        <el-input  placeholder="请输入搜索内容" v-model="wd" >
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>
                </el-menu>
            </div>

        </el-header>
        <el-main>
            <div><img style="width: 100%;margin-left: 5px"  src="imgs/productlist.gif"></div>
            <div style="text-align: center">
                <div style="width: 1000px;
                background-color:rgba(250,248,228,0.88);margin-left: 20px;margin-bottom: 5px ">
                    <!--商品列表开始-->
                    <el-row gutter="20">
                        <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
                            <el-card>
                                <img :src="p.url" width="170px" height="200px" alt="">
                                <div>
                                    <p style="font-size: 15px;height: 10px;">
                                        {{p.title}}</p>
                                    <p style="font-size: 15px;color: #666 ;margin-top: 0px;font-weight: bold">
                                        ￥{{p.price}}<s style="font-size: 12px;color: red">{{p.oldPrice}}</s>
                                        <span style="float: right">销量:{{p.saleCount}}件</span>
                                    </p>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <!--商品列表结束-->


                </div>
            </div>
        </el-main>
        <el-footer>
            <img style="width: 100%;height: 50px" src="imgs/foot.jpg" alt="">
            <div style="background-color: #3f3f3f;padding:30px 0;text-align: center;color: #b1b1b1">
                <p>Copyright @ 重庆互联网学院 重庆市渝北区华山南路  JSD2207
                </p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!-- import axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                wd:"",
                activeIndex: '1',
                topArr:[{title:"小米电视",saleCount:688},
                    {title:"华为手机",saleCount:322},
                    {title:"匹克球鞋",saleCount:256},
                    {title:"联想电脑",saleCount:198}],
                productArr:[{title:"a",price:233,oldPrice:598,url:"imgs/TS1.jpg",saleCount:2342},
                    {title:"b",price:233,oldPrice:598,url:"imgs/TS2.jpg",saleCount:2342},
                    {title:"c",price:233,oldPrice:598,url:"imgs/TS3.jpg",saleCount:2342},
                    {title:"d",price:233,oldPrice:598,url:"imgs/TS4.jpg",saleCount:2342},
                    {title:"d",price:233,oldPrice:598,url:"imgs/TS4.jpg",saleCount:2342},
                    {title:"d",price:233,oldPrice:598,url:"imgs/TS4.jpg",saleCount:2342},
                    {title:"d",price:233,oldPrice:598,url:"imgs/TS4.jpg",saleCount:2342},
                    {title:"d",price:233,oldPrice:598,url:"imgs/TS4.jpg",saleCount:2342},
                    {title:"d",price:233,oldPrice:598,url:"imgs/TS4.jpg",saleCount:2342},
                    {title:"d",price:233,oldPrice:598,url:"imgs/TS4.jpg",saleCount:2342},
                    ],



            }
        },

        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            search(){
            },


        }
    })
</script>
</html>